<template>
  <div class="cmscomen cusConMana">
    <div class="infoTable" :style="{ paddingLeft: paddingWidth + 'px'}">
      <div class="topMenu">
        <span>信息流数据管理</span>
        <span style="padding:0 4px;">/</span>
        <span class="two">客户合同管理</span>
      </div>
      <div class="formInfo">
        <el-input style="width:300px;padding-right:20px" v-model="contractNo" placeholder="请输入合同编号" @keyup.enter.native="pageInfo"></el-input>
        <el-select v-model="customer_items.model_value" :placeholder="customer_items.placeHolder" clearable filterable @change="pageInfo">
          <el-option
              v-for="item in customer_items.options"
              :key="item.customerCode"
              :label="item.customerName"
              :value="item.customerCode">
          </el-option>
        </el-select>
        <el-select v-model="contract_items.model_value" @change="pageInfo" :placeholder="contract_items.placeHolder" clearable filterable>
            <el-option
                v-for="item in contract_items.options"
                :key="item.id"
                :label="item.val"
                :value="item.id">
            </el-option>
        </el-select>
      </div>
      <div class="accountBtn">
        <el-row>
          <el-button type="primary">新建合同</el-button>
        </el-row>
      </div>
      <div class="accountWra">
        <div class="AccounTop"></div>
        <div class="AccountableWar gxw-con">
            <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                :data="tableData"
                border
                stripe
                style="width: 100%"
            >
                <el-table-column
                    v-for="(c, i) in table_column"
                    :key="i"
                    :fixed="c.fixed"
                    :sortable="c.sortable"
                    :prop="c.prop"
                    :label="c.label"
                    :formatter="c.format"
                    :min-width="c.minwidth"
                    width="auto"
                    v-if="c.visible">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="查看合同"
                    width="80"
                    min-width="80"
                    class-name="exitBut">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="查看" placement="top">
                            <el-button style="padding:3px 3px" type="primary" class="inlineBox icon iconfont icon-chakan" circle  @click="exitEvent(scope.row.id,scope.column.label)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                    fixed="right"
                    label="合同修改"
                    width="100"
                    min-width="100"
                    class-name="exitBut">
                    <template slot-scope="scope">
                        <div @click="exitEvent(scope.row.id,scope.column.label)"><i class="el-icon-edit"></i></div>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page.currentPage"
                :page-sizes="page.sizes"
                :page-size="page.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.count">
            </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name:'accountData',
  data(){
      return {
          loading: false,
          visibleMenuSelectStatus: false,
          checkedCities: ['序号', '合同编号', '客户主体', '开始时间', '结束时间', '合同状态', '审核状态'],
          cities: ['序号', '合同编号', '客户主体', '开始时间', '结束时间', '合同状态', '审核状态'],
          table_column: [
              {fixed: true, prop: 'id', label: '序号', sortable: true, visible: true,minwidth:70},
              {fixed: false, prop: 'contractNo', label: '合同编号', sortable: false, visible: true,minwidth:160},
              {fixed: false, prop: 'name', label: '客户主体', sortable: false, visible: true,minwidth:300},
              {fixed: false, prop: 'beginTime', label: '开始时间', sortable: false, visible: true,minwidth:90},
              {fixed: false, prop: 'endTime', label: '结束时间', sortable: false, visible: true,minwidth:90},
              {fixed: false, prop: 'status', label: '合同状态', sortable: true, visible: true,minwidth:100,format:function(row,col){
                  switch (row.status){
                      case 0:return '-';break;
                      case 1:return '正常';break;
                      case 2:return '即将过期';break;
                      case 3:return '已过期';break;
                  }
              }},
              {fixed: false, prop: 'checkStatus', label: '审核状态', sortable: true, visible: true,minwidth:100,format:(row,col)=>{
                  return this.$store.getters.findDingStatus(row.checkStatus)?this.$store.getters.findDingStatus(row.checkStatus).val:'未开始';
              }},
          ],
          page: {
              sizes: [10, 20, 50,100,200,500],
              offset: 1,
              limit: 10,
              count: 0,
              currentPage: 1,
          },
          menu_nav: ['信息流数据管理', '客户合同管理'
          ],
          customer_items: {
              model_value: '',
              placeHolder: '全部客户',
              options: [
              ]
          },
          contract_items: {
              model_value: '',
              placeHolder: '全部状态',
              options: [
                  {
                      id: '0',
                      val: '全部状态'
                  },
                  {
                      id: '1',
                      val: '正常'
                  },
                  {
                      id: '2',
                      val: '即将过期'
                  },
                  {
                      id: '3',
                      val: '已过期'
                  },
              ]
          },
          tableData: [],
          contractNo: '',
          isFirstEnter:false, // 是否第一次进入，默认false
      };
  },
  computed:{
    paddingWidth(){
      return this.$store.state.paddingWidth;
    }
  },
  created(){
    // this.$nextTick(function(){
    //   console.log(document.querySelector('.el-table__header-wrapper'))
    // })
    this.customerInfo();
    this.pageInfo();
  },
  methods:{
      cancelQuest(){
        if(typeof this.source ==='function'){
            this.source('终止请求'); //取消请求
        }
      },
      customerInfo() {
          /*客户*/
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpCusGetCustomerList,
              params: {
                  offset: 1,
                  limit: 9999,
                  val: '',
              }
          }).then(res => {
              if (res.status == 200) {
                  var data = res.data;
                  var data1 = data.unshift({'customerCode':'0','customerName':'全部客户'});
                  this.customer_items.options = data;
              } else {
              }
          }).catch(error => {
              console.log(error);
          });
      },
      pageInfo(){
          /*合同列表*/
          this.tableData=[];
          this.loading=true;
          const _this = this;
          this.cancelQuest(); //在请求发出前取消上一次未完成的请求
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpConSearchCustomer,
              params: {
                  offset: this.page.offset,
                  limit: this.page.limit,
                  contractNo: this.contractNo,
                  customerCode: this.customer_items.model_value=='0'?this.customer_items.model_value='':this.customer_items.model_value,
                  contractStatus: this.contract_items.model_value,
              },
              cancelToken: new axios.CancelToken(function executor(c) {_this.source = c;})
          }).then(res => {
              this.loading=false;
              if (res.status == 200) {
                  var data = res.data;
                  this.page.count = data.totalNums;
                  this.tableData = data.items;
              } else {
              }
          }).catch(err => {
                if (axios.isCancel(err)) {
                    _this.loading=false;
                    console.log('Request canceled', err.message);
                    console.log(_this.loading)
                } else {
                    _this.loading=false;
                }
          });
      },
      handleCurrentChange(val) {
          this.page.offset = val;
          this.pageInfo();
      },
      handleSizeChange(val) {
          this.page.limit = val;
          this.pageInfo();
      },
      checkedChange() {
          for (let item of this.table_column) {
              var index = this.checkedCities.indexOf(item.label);
              index >= 0 ? item.visible = true : item.visible = false;
          }
      },
      changeCheckStatus(e) {
          e.stopPropagation();
          this.visibleMenuSelectStatus = !this.visibleMenuSelectStatus;
      },
      newContract() {
          this.$router.push({path: 'cusContractNew', query: {customerContractId: ''}});
      },
      bodyEvent() {
          this.visibleMenuSelectStatus = false;
      },
      preventDefault(e) {
          e.stopPropagation();
      },
      exitEvent(id,name) {
          // console.log(id);
          this.$router.push({path: 'cusContractEdit', query: {customerContractId: id,titleName:name}});
      }
  }
}
</script>
<style>
.cusConMana .infoTable{
  width: 100%;
}

</style>

